<template>
	<div>
		<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
			<el-form-item>
				<el-select
					v-model="dataForm.deptId"
					class="input"
					placeholder="部门"
					size="medium"
					clearable="clearable"
				>
					<el-option v-for="one in deptList" :label="one.deptName" :value="one.id" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select
					v-model="dataForm.typeId"
					class="input"
					placeholder="罚款类型"
					size="medium"
					clearable="clearable"
				>
					<el-option v-for="one in amectTypeList" :label="one.type" :value="one.id" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-date-picker
					v-model="dataForm.date"
					type="daterange"
					range-separator="~"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					size="medium"
				></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button size="medium" type="primary" @click="searchHandle()">生成报表</el-button>
			</el-form-item>
		</el-form>
		<div id="chart-container">
			<el-row :gutter="100">
				<el-col :span="8"><div class="chart" id="chart-1"></div></el-col>
				<el-col :span="8"><div class="chart" id="chart-2"></div></el-col>
				<el-col :span="8"><div class="chart" id="chart-3"></div></el-col>
			</el-row>
			<el-row>
				<el-col :span="24"><div id="chart-4"></div></el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import $ from 'jquery';
import dayjs from 'dayjs';
export default {
	data: function() {
		return {
			dataForm: {
				deptId: null,
				typeId: null,
				date: null
			},
			deptList: [],
			amectTypeList: [],
			dataList: []
		};
	},
	methods: {
		loadDeptList: function() {
			let that = this;
			that.$http('dept/searchAllDept', 'GET', null, true, function(resp) {
				that.deptList = resp.list;
			});
		},
		loadAmectTypeList: function() {
			let that = this;
			that.$http('amect_type/searchAllAmectType', 'GET', {}, true, function(resp) {
				that.amectTypeList = resp.list;
			});
		},
		loadDataList: function() {
			let that = this;
			that.dataListLoading = true;

			let data = {
				deptId: that.dataForm.deptId,
				typeId: that.dataForm.typeId
			};

			if (that.dataForm.date != null && that.dataForm.date.length == 2) {
				let startDate = that.dataForm.date[0];
				let endDate = that.dataForm.date[1];
				data.startDate = dayjs(startDate).format('YYYY-MM-DD');
				data.endDate = dayjs(endDate).format('YYYY-MM-DD');
			}

			that.$http('amect/searchChart', 'POST', data, true, function(resp) {
				let chart_1 = resp.chart_1;
				let temp = [];
				for (let one of chart_1) {
					temp.push({ name: one.type, value: one.ct });
				}
				// 绘制图表
				let option_1 = {
					title: {
						show: false,
						text: '暂无数据',
						left: 'center',
						top: 'center',
						textStyle: {
							color: 'pink',
							fontSize: 16,
							fontWeight: 400
						}
					},
					tooltip: {
						trigger: 'item'
					},
					series: [
						{
							name: '罚款类型',
							type: 'pie',
							radius: ['40%', '70%'],
							avoidLabelOverlap: false,
							label: {
								formatter: '{name|{b}}',
								rich: {
									time: {
										fontSize: 12,
										color: '#999'
									}
								}
							},
							data: temp
						}
					]
				};
				let myChart = null;
				if (temp == null || temp.length == 0) {
					option_1.title.show = true;

					myChart = that.$echarts.init($('#chart-1')[0]);
					myChart.setOption(option_1);
				} else {
					myChart = that.$echarts.init($('#chart-1')[0]);
					myChart.setOption(option_1);
				}

				let chart_2 = resp.chart_2;
				temp = [];
				for (let one of chart_2) {
					if (one.ct > 0) {
						temp.push({ name: one.title, value: one.ct });
					}
				}
				let option_2 = {
					title: {
						show: false,
						text: '暂无数据',
						left: 'center',
						top: 'center',
						textStyle: {
							color: 'pink',
							fontSize: 16,
							fontWeight: 400
						}
					},
					tooltip: {
						trigger: 'item'
					},
					series: [
						{
							name: '罚款类型',
							type: 'pie',
							radius: ['40%', '70%'],
							avoidLabelOverlap: false,
							label: {
								formatter: '{name|{b}}',
								rich: {
									time: {
										fontSize: 12,
										color: '#999'
									}
								}
							},
							data: temp
						}
					]
				};

				if (temp == null || temp.length == 0) {
					option_2.title.show = true;
					myChart = that.$echarts.init($('#chart-2')[0]);
					myChart.setOption(option_2);
				} else {
					myChart = that.$echarts.init($('#chart-2')[0]);
					myChart.setOption(option_2);
				}

				let chart_3 = resp.chart_3;
				temp = [];
				for (let one of chart_3) {
					if (one.ct > 0) {
						temp.push({ name: one.title, value: one.ct });
					}
				}
				let option_3 = {
					title: {
						show: false,
						text: '暂无数据',
						left: 'center',
						top: 'center',
						textStyle: {
							color: 'pink',
							fontSize: 16,
							fontWeight: 400
						}
					},
					tooltip: {
						trigger: 'item'
					},
					series: [
						{
							name: '罚款类型',
							type: 'pie',
							radius: ['40%', '70%'],
							avoidLabelOverlap: false,
							label: {
								formatter: '{name|{b}}',
								rich: {
									time: {
										fontSize: 12,
										color: '#999'
									}
								}
							},
							data: temp
						}
					]
				};
				if (temp == null || temp.length == 0) {
					option_3.title.show = true;
					myChart = that.$echarts.init($('#chart-3')[0]);
					myChart.setOption(option_3);
				} else {
					myChart = that.$echarts.init($('#chart-3')[0]);
					myChart.setOption(option_3);
				}

				console.log(resp);
				let chart_4_1 = resp.chart_4_1;
				let data_1 = [];
				for (let one of chart_4_1) {
					data_1.push(one.ct);
				}
				let chart_4_2 = resp.chart_4_2;
				let data_2 = [];
				for (let one of chart_4_2) {
					data_2.push(one.ct);
				}

				let option_4 = {
					title: {
						text: '全年违纪统计图'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: {
						data: ['已交费', '未交费']
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							boundaryGap: false,
							data: [
								'1月',
								'2月',
								'3月',
								'4月',
								'5月',
								'6月',
								'7月',
								'8月',
								'9月',
								'10月',
								'11月',
								'12月'
							]
						}
					],
					yAxis: [
						{
							type: 'value'
						}
					],
					series: [
						{
							name: '已交费',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							smooth:true,
							data: data_1
						},
						{
							name: '未交费',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							smooth:true,
							data: data_2
						}
					]
				};
				myChart = that.$echarts.init($('#chart-4')[0]);
				myChart.setOption(option_4);
			});
		},
		searchHandle: function() {
			this.$refs['dataForm'].validate(valid => {
				if (valid) {
					this.$refs['dataForm'].clearValidate();
					this.loadDataList();
				} else {
					return false;
				}
			});
		}
	},
	created: function() {
		this.loadDeptList();
		this.loadAmectTypeList();
		this.loadDataList();
	}
};
</script>

<style lang="less" scoped="scoped">
@import url('less/amect_report.less');
</style>
